'use client';

import React, { forwardRef } from 'react';
import { motion } from 'framer-motion';
import { cn } from '@/utils';

export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: 'default' | 'outlined' | 'elevated' | 'filled';
  hover?: boolean;
  padding?: 'none' | 'sm' | 'md' | 'lg';
}

const Card = forwardRef<HTMLDivElement, CardProps>((
  {
    className,
    variant = 'default',
    hover = false,
    padding = 'md',
    children,
    ...props
  },
  ref
) => {
  const cardClasses = cn(
    // 基础样式
    'rounded-xl transition-all duration-200',
    
    // 变体样式
    {
      // Default - 白色背景，轻微阴影
      'bg-white shadow-sm border border-gray-100': variant === 'default',
      
      // Outlined - 边框样式
      'bg-white border-2 border-gray-200': variant === 'outlined',
      
      // Elevated - 较强阴影
      'bg-white shadow-lg border border-gray-50': variant === 'elevated',
      
      // Filled - 灰色背景
      'bg-gray-50 border border-gray-100': variant === 'filled',
    },
    
    // 内边距
    {
      'p-0': padding === 'none',
      'p-3': padding === 'sm',
      'p-4': padding === 'md',
      'p-6': padding === 'lg',
    },
    
    // 悬停效果
    {
      'hover:shadow-md hover:border-gray-200 cursor-pointer': hover && variant === 'default',
      'hover:border-gray-300': hover && variant === 'outlined',
      'hover:shadow-xl': hover && variant === 'elevated',
      'hover:bg-gray-100 hover:border-gray-200': hover && variant === 'filled',
    },
    
    className
  );

  if (hover) {
    return (
      <motion.div
        ref={ref}
        className={cardClasses}
        whileHover={{ y: -2 }}
        transition={{ type: 'spring', stiffness: 300, damping: 30 }}
        {...props}
      >
        {children}
      </motion.div>
    );
  }

  return (
    <div ref={ref} className={cardClasses} {...props}>
      {children}
    </div>
  );
});

Card.displayName = 'Card';

// Card Header 组件
export const CardHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((
  { className, children, ...props },
  ref
) => (
  <div
    ref={ref}
    className={cn('flex flex-col space-y-1.5 pb-4', className)}
    {...props}
  >
    {children}
  </div>
));

CardHeader.displayName = 'CardHeader';

// Card Title 组件
export const CardTitle = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>((
  { className, children, ...props },
  ref
) => (
  <h3
    ref={ref}
    className={cn('text-lg font-semibold leading-none tracking-tight text-gray-900', className)}
    {...props}
  >
    {children}
  </h3>
));

CardTitle.displayName = 'CardTitle';

// Card Description 组件
export const CardDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>((
  { className, children, ...props },
  ref
) => (
  <p
    ref={ref}
    className={cn('text-sm text-gray-600', className)}
    {...props}
  >
    {children}
  </p>
));

CardDescription.displayName = 'CardDescription';

// Card Content 组件
export const CardContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((
  { className, children, ...props },
  ref
) => (
  <div ref={ref} className={cn('pt-0', className)} {...props}>
    {children}
  </div>
));

CardContent.displayName = 'CardContent';

// Card Footer 组件
export const CardFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((
  { className, children, ...props },
  ref
) => (
  <div
    ref={ref}
    className={cn('flex items-center pt-4', className)}
    {...props}
  >
    {children}
  </div>
));

CardFooter.displayName = 'CardFooter';

export default Card;